<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <ul id="meinv">
        <li>西施</li>
        <li>貂蝉</li>
        <li>昭君</li>
        <li>凤姐</li>
        <li>芙蓉姐姐</li>
      </ul>
      <button>按钮</button>
    </div>
    <script>
      //       页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，并且单击新增的美女背景也会变为红色，具体表现如下图：
      //       1）要求使用到事件委托

      //  页面上有一些美女列表，当单击li时背景色变为红色
      var ul = document.querySelector("#meinv");
      var lis = ul.querySelectorAll("li");
      var btn = document.querySelector("button");
      for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
          for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = "";
          }
          this.style.backgroundColor = "red";
        };
      }
      //      点击按钮时会新增1个美女到列表最前面
      btn.onclick = function () {
        var li = document.createElement("li");
        li.innerHTML = "杨超越";
        // insertBefore使用的语法格式，父元素.insertBefore（添加的元素，指定的位置）
        ul.insertBefore(li, ul.children[0]);
      };
      ul.onclick = function (e) {
        for (var i = 0; i < ul.children.length; i++) {
          ul.children[i].style.backgroundColor = "";
        }
        e.target.style.backgroundColor = "red";
      };
    </script>
  </body>
</html>
